今天要來繼續研究 jQuery 的用法，經過我非常努力的看書後，發現勾不起我寫文章的動力，索性就直接在網路上看看有什麼比較實用的 jQuery 語法【1】，可以激發我一點點的寫作靈感。那麼，就直接開始吧！
把方法整理成表格。
| 常用 jQuery 語法 | 說明 | 備註 |
|---|---|---|
| $(selector).val( ) | 取用 value 的值。 | 常用於 Form 表單，val( 可以賦值，或是 function )。 |
| $(selector).text( ) | innerText。 | text( 可以賦值，或是 function )。 |
| $(selector).html( ) | innerHTML。 | html( 可以賦值，或是 function )。 |
| $(selector).css(”屬性”, “值”) | 修改 CSS 屬性與值。可以用 { } 寫多個屬性，用逗點隔開。 | $("p").css({"background-color": “red", "font-size": "200%"}); |
| $(selector).hide() | 隱藏。 | 類似 display:none，不再影響頁面的佈局。 |
| $(selector).show() | 顯示。 | $(selector).show(speed,easing,callback) |
| $(selector).slideToggle(); | 元素滑動隱藏或開啟，類似 Collapsibles 用法。 | $("button").click(function(){ $("p").slideToggle(); }); }); |
補充資料：
實作一些組件的功能，這裡主要是練習如何將現成的 jQuery 組件套用到自己的專案中，每個組件都會附上程式碼來源網址，有興趣的朋友可以直接去原網址，鼓勵原作者，那麼來看看有哪些東西吧～
程式碼來源：Back to top with CSS and jQuery
回到網頁最上方（Go Top）是網頁中很常見的組件，這裡找到一個不錯的作法，可以快速套用之外，也能夠放入自己的圖片，以下程式碼我有稍微改寫，有興趣可參考以下的 Back to top button 實作方法。
首先，先加入 jQuery CDN。
HTML：
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"
></script>;
HTML 只加入一行，加在內容的最下面。
HTML：
<a href="#" class="back-to-top"></a>
這裡主要是處理 Go Top 按鈕的擺放位置以及動畫效果，而按鈕的樣式主要是用一張圖片代替，所以這裡可以直接插入你自己的圖片來替換。
CSS：
body {
height: 2000px;
}
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 64px;
height: 64px;
z-index: 2;
cursor: pointer;
text-decoration: none;
transition: opacity 0.2s ease-out;
background-image: url(top.png);
}
.back-to-top:hover {
opacity: 0.7;
}
最後，只要帶入下面的 jQuery 語法後，應該就會有功能了，趕緊試試看吧！
JavaScript：
$(document).ready(function () {
$(window).scroll(function () {
var showAfter = 100;
if ($(this).scrollTop() > showAfter) {
$('.back-to-top').fadeIn();
} else {
$('.back-to-top').fadeOut();
}
});
$('.back-to-top').click(function () {
$('html, body').animate({scrollTop: 0}, 800);
return false;
});
});
顯示結果：
推薦這個寫法，因為非常好用，也非常的合理。
程式碼來源：CodePen Home jQuery Pagination Example (twbs-pagination)
分頁功能也是頁面上很常見的組件之一，有些 Pagination 能夠支援 AJAX，這次找到的 Pagination 使用上比較不複雜，這邊先記錄下來，等有時間再深入研究～
一樣先加入相關的 CDN。
HTML：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
這裡除了 bootstrap.min.css 之外，還要加入 jQuery、Bootatrap 和 twbsPagination.min.js。
HTML：
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.2/jquery.twbsPagination.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
主要程式。
HTML：
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>jQuery Pagination</h1>
<p>
Simple pagination using the TWBS pagination JS library. Click the buttons below to navigate
to the appropriate content
</p>
<ul id="pagination-demo" class="pagination-sm"></ul>
</div>
</div>
<div id="page-content" class="page-content">Page 1</div>
</div>
</div>
CSS：
.wrapper {
margin: 60px auto;
text-align: center;
}
h1 {
margin-bottom: 1.25em;
}
#pagination-demo {
display: inline-block;
margin-bottom: 1.75em;
}
#pagination-demo li {
display: inline-block;
}
.page-content {
background: #eee;
display: inline-block;
padding: 10px;
width: 100%;
max-width: 660px;
}
JavaScript：
$("#pagination-demo").twbsPagination({
totalPages: 16,
visiblePages: 6,
next: "Next",
prev: "Prev",
onPageClick: function (event, page) {
$("#page-content").text("Page " + page) + " content here";
}
});
顯示結果：
這裡整理了常用的 jQuery 語法表格，以及練習移植「Back to top button」和「Pagination」這兩個組件，由於今天大部分的時間都花在思考語法的寫法上，所以文章的內容就比較少一些，不過我還是盡可能地補上一些重要的組件，希望在鐵人賽結束之前，能夠把常用的組件都介紹完。好歐，今天的內容就到這邊結束，謝謝收看！
iThome鐵人賽
看影片追技術